import React, { Component } from 'react'

import './Brand.css'
import Dialog from './Dialog'

export default class Brand extends Component {

  constructor() {
    super()
    // 初始化变量
    this.editRef = React.createRef()
    this.state = {
      brandList: [],
      dialogVisible: false
    }
  }

  // 数据初始化(生命周期)
  componentDidMount() {
    // 模拟请求异步数据
    let list = [
      { id: 2, name: "华为", info: "中华有为，国货之光" },
      { id: 1, name: "小米", info: "为发烧而生" }
    ]

    // 更新异步数据
    this.setState({
      brandList: list,
      editForm: {
        id: "",
        name: "",
        info: ""
      }
    })
  }

  showDialog() {
    this.setState({
      dialogVisible: true
    })
  }

  hideDialog() {
    this.setState({
      dialogVisible: false,
      editForm: { id: '', name: '', info: '' }
    })
  }

  addBrand(name, info) {
    // 计算id
    let id = this.state.brandList.length > 0 ? this.state.brandList[0].id + 1 : 1
    // 组合数据
    let brand = { id, name, info }
    // 添加数据并刷新页面
    this.state.brandList.unshift(brand)
    this.setState({
      brandList: [...this.state.brandList]
    })
  }

  delBrand(id) {
    let result = window.confirm("确定要删除该数据吗？")
    if (!result) return
    // 通过数组的filter，过滤删除id数据
    this.state.brandList = this.state.brandList.filter(item => item.id !== id)
    // 刷新页面
    this.setState({})
  }

  edit(item) {
    // 1.通过自定义属性赋值要修改的数据
    // 自定义属性的赋值方式：结合生命周期完成数据关联
    // console.log(item, 99999)
    // this.state.editForm = { ...item }
    // 显示弹窗
    // this.showDialog()

    // 通过ref方式直接修改子组件数据
    console.log(this.editRef, 8888)
    // 2. 比较山寨的实现
    // 显示弹窗
    // this.showDialog()
    // setTimeout(() => {
    //   this.editRef.current.setState({
    //     id: item.id,
    //     name: item.name,
    //     info: item.info
    //   })
    // }, 20)

    // 3. 等待DOM更新后获取数据（推荐）
    // 等dialogVisible赋值并页面刷新完成后，获取ref数据
    this.setState({
      dialogVisible: true
    }, () => {
      this.editRef.current.setState({
        id: item.id,
        name: item.name,
        info: item.info
      })
    })
  }

  editBrand(id, name, info) {
    // 找数据
    let index = this.state.brandList.findIndex(item => item.id = id)
    // 改数据
    this.state.brandList[index].name = name
    this.state.brandList[index].info = info
    // 刷新页面
    this.setState({
      brandList: [...this.state.brandList]
    })
  }

  render() {
    return (
      <div className="brand-container">
        <h2>品牌数据管理</h2>
        <button className='btn edit' onClick={this.showDialog.bind(this)}>新增品牌</button>
        {/* 新增品牌数据弹窗 */}
        {
          this.state.dialogVisible ?
            <Dialog hideDialog={this.hideDialog.bind(this)}
              ref={this.editRef}
              editForm={this.state.editForm}
              addBrand={this.addBrand.bind(this)}
              editBrand={this.editBrand.bind(this)}></Dialog> : ''
        }
        <table cellPadding={10} cellSpacing={0} width="80%">
          <thead>
            <tr>
              <th>序号</th>
              <th>名称</th>
              <th>描述</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            {
              this.state.brandList.map(item => (
                <tr key={item.id}>
                  <td>{item.id}</td>
                  <td>{item.name}</td>
                  <td>{item.info}</td>
                  <td>
                    <button className="btn edit" onClick={() => this.edit(item)}>编辑</button>
                    <button className="btn del" onClick={() => this.delBrand(item.id)}>删除</button>
                  </td>
                </tr>
              ))
            }
          </tbody>
        </table>
      </div>
    )
  }
}
